<script setup lang="ts">
/**
 * @author lwlianghehe@gmail.com
 * @date 2024/11/22
 */
import MyDivider from "../components/divider/my-divider.vue";
import MyPassword from "../components/password/my-password.vue";
import MyImage from "../components/image/my-image.vue";
import MyInput from "../components/input/my-input.vue";
import MyLabel from "../components/label/my-label.vue";
import {ref} from "vue";
import FormField from "../model/FormField.ts";
import {login} from "../api/loginApi.ts";
import {useRouter} from "vue-router";
import {setUserId} from "../cache/userStorage.ts";
import {setToken} from "../cache/tokenStorage.ts";
import {goDatabaseManager, goRegister, goResetPassword} from "../util/routerUtils.ts";
import {useStorage} from "@vueuse/core";
import {getDB} from "../api/dbAPI.ts";
import {emitLogin} from '../global/bus/mittBus.ts'
import {InputExpose} from "../global/input/InputExpose.ts";
import MyText from "../components/text/my-text.vue";


const account_input = ref<InputExpose>()
const db_input = ref<InputExpose>()
const password_input = ref<InputExpose>()
const account = ref<FormField>(new FormField(""))
const password = ref<FormField>(new FormField(""))

const login_error = ref(false)
const router = useRouter()
const db = ref<FormField>(new FormField(useStorage('db', '').value))

const allDBS = ref<any>([])

getDB().then(data => {
  allDBS.value.splice(0, allDBS.value.length)
  allDBS.value.push(...data)
})


const loginClick = () => {
  if (!account_input.value?.validate()) {
    return;
  }
  if (!password_input.value?.validate()) {
    return;
  }
  login_error.value = false
  login(db.value.value, account.value.value, password.value.value).then(res => {
    setUserId(res.id)
    setToken(res.token)
    emitLogin();
    document.body.setAttribute('login', '')
    router.push({
      path: '/model'
    })
  }).catch((error) => {
    console.log(error)
    login_error.value = true
  })

}
const goRegisterClick = () => {
  goRegister();
}

const goResetPasswordClick = () => {
  goResetPassword()
}

const goDatabaseManagerClick = () => {
  goDatabaseManager()
}
</script>

<template>
  <div class="w-full h-full bg" style="background-image:url('/color4bg.png');background-size: cover">
    <div class="w-full flex justify-center py-12 ">
      <div class="w-[300px] p-4 bg-background">
        <div class="flex justify-center">
          <my-image width="auto" class="" src="/logo.png"></my-image>
        </div>
        <MyDivider margin="1rem auto"></MyDivider>
        <div class="pb-2" v-if="allDBS.length">
          <my-label class="my-2" htmlFor="account">数据库</my-label>
          <MyInput ref="db_input" v-model="db" disabled :readonly="true" right-content="选择"
                   :required="true">
            <template #append>
              <my-icon @click="goDatabaseManagerClick" class="cursor-pointer" icon="database" type="fas"/>
            </template>
          </MyInput>
        </div>
        <div class="pb-2">
          <my-label class="my-2" htmlFor="account">账户</my-label>
          <MyInput ref="account_input" @keyup.enter="loginClick" v-model="account"
                   :required="true"></MyInput>
          <div v-show="!account.isValidate" class="absolute text-danger">请填写账号</div>
        </div>
        <div class="pb-2">
          <my-label class="my-2" html-for="password">密码</my-label>
          <MyPassword @keyup.enter="loginClick" ref="password_input" v-model="password"
                      :required="true"></MyPassword>
          <div v-show="!password.isValidate" class="text-danger absolute">请填写密码</div>
        </div>
        <div class="py-2" v-if="login_error">
          <div class="bg-danger-light-9 text-danger px-4 py-2 rounded">错误的登录名/密码</div>
        </div>
        <div class="pt-4">
          <MyButton type="primary" class="w-full" @click="loginClick" rounded>登录</MyButton>
        </div>
        <div class="flex justify-between pt-4">
          <my-text class="cursor-pointer" type="primary" @click="goRegisterClick">还没有账户?</my-text>
          <my-text class="cursor-pointer" type="primary" @click="goResetPasswordClick">重置密码</my-text>
        </div>
        <div class="pt-8">
          <MyDivider></MyDivider>
        </div>

        <div class="flex justify-center pt-4 h-auto items-center">
          <my-text class="cursor-pointer" type="primary" @click="goDatabaseManagerClick">管理数据库</my-text>
          <MyDivider direction="vertical"></MyDivider>
          <my-text class="cursor-pointer" type="primary">由Avalon提供支持</my-text>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
